<template>
  <div classs="exportDown">
    <!-- inframe -->
    <div >
      <div class="box-card">
        <el-tabs v-model="activeName" type="card" @tab-click="changeTabs">
          <el-tab-pane label="工点总览" name="工点总览">
            <work-point-home ref="workPointHome1"></work-point-home>
          </el-tab-pane>
          <el-tab-pane label="数据绘图" name="数据绘图">
            <echarts-table ref="echartsTable1"></echarts-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>

</template>

<script>
  import workPointHome from './monitor/work-point-home'
  import echartsTable from './monitor/echarts-table'
  import {
    workPointInfo
  } from "@/services/model/open_iframe.js";

  export default {
    data() {
      return {
        activeName: '工点总览',
        echartsFirst: true,
        workPointInfo:{}
      };

    },
    components: {workPointHome, echartsTable},
    filters: {},
    methods: {
      changeTabs() {
        if (this.activeName == '数据绘图'&&this.echartsFirst) {
          this.$refs.echartsTable1.queryMonitorInfo()
          this.echartsFirst=false
        }
      },

      async getWorkPointInfo(val) {
        let res = await workPointInfo(val);

  this.workPointInfo=res
    if(res){
      this.$nextTick(()=>{
        this.$refs.workPointHome1.getWorkPointInfo(  this.workPointInfo)
        this.$refs.echartsTable1.getOptionsList(  this.workPointInfo.data)
      })
    }



      },
    },
    created() {
      this.getWorkPointInfo({
        // workPointId: '1635917514806575106'
        workPointId: this.$route.query.workPointId
      });
    },
    activated() {
    },
    mounted() {
    },

  };
</script>

<style lang="less" scoped>
  .exportDown {
    width: 100vw;
    height: 100vh;

    overflow: hidden;
  }

  .exportBg {
    width: 98%;
    height: 100%;
    margin: auto;
    margin-top: 10px;
    box-shadow: 0px 0px 8px black;

    .box-card {
      width: 100%;
      min-height: 270px;
      color: white;
      overflow: hidden;

      .firstLevel {
        margin: auto;
        margin-top: 20px;
        width: 90%;
        height: 160px;

        /deep/ .el-tabs__item {
          color: black;
          width: 50%;
          text-align: center;
          box-sizing: border-box;
          font-size: 16px;
        }

        /deep/ .el-tabs__item.is-active {
          color: white;
          background-color: #1990FE;
          font-size: 140%;
          box-sizing: border-box;
        }


        /deep/ .el-tabs__active-bar {
          background-color: #1990FE !important;
        }
      }

      .footLevel {
        width: 100%;
        height: 50px;
        // background: red;
        position: relative;

        /deep/ .el-button {
          background: #1990FE;
          color: white;
          border: none;
          position: absolute;
          bottom: 0;
          right: 10%;
        }

        // 修改弹窗
      }
    }
  }

  .downloadBg {
    margin: auto;
    margin-top: 20px;
    width: 80%;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: 0px 0px 8px black;

    /deep/ .el-table {
      margin: auto;
      margin-top: 20px !important;
    }

    /deep/ .el-button {
      background: #1990FE;
      color: white;
    }

    .el-pagination {
      margin: auto;
      margin-top: 20px;
      width: 80%;
    }
  }

  // 修改下拉菜单 宽度
  /deep/ .el-cascader {
    margin: auto;
    position: relative;
    width: 100%;

    .el-input {
      margin-right: 20px;
    }
  }

</style>


<style lang="less">

  .el-message-box__header {
    background: #1990FE !important;

    span {
      color: white;
      font-size: 22px;
    }

  }

  .el-message-box {
    // background: yellow !important;
  }

  .el-message-box__headerbtn .el-message-box__close {
    color: white;
  }

  .el-message-box__message {
    margin-top: 20px;
    color: #1990FE;
    font-size: 20px;
  }

  .el-message-box__btns {

  }

  // background: #1990FE;


</style>
